<template>
  <div class="bg_block">
    <headback class="border_bottom" :title="t('myRecord')"></headback>
    <div class="index_box topHead">
      <div class="flex_box" style="margin-bottom: 5px;">
        <!-- <div class="complete_box">
          <div class="complete_item">
           {{ t('ConfirmationTip') }}
          <div class="complete_sum">
            <img :src="requireImg(store.state.usdtImg)" alt="" />
            <span class="sum_value">
              {{ store.state.myTotal.tip || 0 }}
            </span>
          </div>
        </div>
        <div class="complete_item">
          {{ t('fee') }}
          <div class="complete_sum">
            <img :src="requireImg(store.state.btcImg)" alt="" />
            <span class="sum_value">
              {{ store.state.myTotal.fee || 0  }}
            </span>
          </div>

          <div class="complete_sum">
            <img :src="requireImg(store.state.usdtImg)" alt="" />
            <span class="sum_value">
              {{ store.state.myTotal.usdtFee || 0 }}
            </span>
          </div>
        </div>
        </div> -->
      </div>
      <div class="title_box">
        <div class="tab_box">
        <div class="item" :class="{ ac: active == 1 }" @click="tabChange(1)">
          {{ t("myBuy") }}
        </div>
        <div class="item" :class="{ ac: active == 2 }" @click="tabChange(2)">
          {{ t("mySell") }}
        </div>
        <div class="bg" :class="{ left1: active == 2 }"></div>
      </div>
      </div>
  
      <div v-if="active == 1" class="tab_warpper">
        <van-pull-refresh v-model="refreshing1" @refresh="onRefresh1">
          <van-list
            v-model:loading="loading1"
            :immediate-check="false"
            :finished="finished1"
            :finished-text="t('noMore')"
            @load="onLoad1"
          >
            <recordItem
              v-for="item in orderList"
              :key="item.orderId"
              :data="item"
              isMy
            ></recordItem>
          </van-list>
        </van-pull-refresh>
      </div>
      <div v-else-if="active == 2" class="tab_warpper">
        <van-pull-refresh v-model="refreshing2" @refresh="onRefresh2">
          <van-list
            v-model:loading="loading2"
            :immediate-check="false"
            :finished="finished2"
            :finished-text="t('noMore')"
            @load="onLoad2"
          >
            <recordItem
              v-for="item in orderList2"
              :key="item.id"
              :data="item"
              isMy
            ></recordItem>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script setup>

import { showToast } from "vant";
import "vant/es/toast/style";
import { useStore } from "vuex";
import { ref, reactive, onMounted, computed, onUnmounted } from "vue";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
import { splitAddress } from "@/utils/index.js";
import { useRouter } from "vue-router";
import IndexDBCache from "@/hooks/sql/useOrder.js";
import c2cEth from "@/utils/c2cEth.js";
import eth from "@/utils/eth.js"
const orderDB = new IndexDBCache();
const router = useRouter();
const store = useStore();
const number = ref();
const active = ref(1);
const tabChange = (value) => {
  active.value = value;
  localStorage.setItem('myActive',value)
  value==1?onRefresh1():onRefresh2()
};

const pageSize = 10
let params1 = reactive({
  page: 1,
  pageSize: pageSize,
});
let params2 = reactive({
  page: 1,
  pageSize: pageSize,
});
const loading1 = ref(false);
const finished1 = ref(false);
const refreshing1 = ref(false);
const loading2 = ref(false);
const finished2 = ref(false);
const refreshing2 = ref(false);
const sortList = computed(()=>{
  return [
  {
    value: 'all',
    name: t("all"),
  },
  {
    value: '0',
    name:  t("pending"),
  },
  {
    value:'1',
    name: t("hasOut"),
  },
  {
    value: '2',
    name:  t("going"),
  },
  {
    value: '3',
    name: t("hasDone"),
  },
  {
    value: '4',
    name: t("hasCancel"),
  },
  {
    value: '5',
    name: t("hasClear"),
  },
  {
    value: '6',
    name: t("hasPing"),
  },

]
});
const showPopover= ref(false)

const sortStatus = ref({});
const orderList = ref([]);
const orderList2 = ref([])
const onRefresh1 = () => {
  // 清空列表数据
  finished1.value = false;
  refreshing1.value = true;
  params1.page = 1;
  loading1.value = true;
  try {
    onLoad1();
  } catch (err) {
    orderList.value = []
  }
};
const onRefresh2 = () => {
  // 清空列表数据
  finished2.value = false;
  refreshing2.value = true;
  params2.page = 1;
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading2.value = true;
  try {
    onLoad2();
  } catch (err) {
    orderList2.value = []
  }
};
const onLoad1 = async () => {
  if (refreshing1.value) {
    orderList.value = []
    params1.page = 1;
    refreshing1.value = false;
  }
  try {
    loading1.value = true
    await orderDB.initDB()
    const account = await eth.getAccount()
    let data = []
    data = await orderDB.getDataByIndex('recordList', 'TypeMyOwner', ['2', account ], params1.page, pageSize)
    orderList.value = [...orderList.value, ...data]
    loading1.value = false
    if (data.length == pageSize) {
      params1.page = params1.page + 1
    } else {
      finished1.value = true;
    }
  } catch (err) {
    loading1.value = false;
    finished1.value = true;
  }
};
const onLoad2 = async () => {
  if (refreshing2.value) {
    orderList2.value = []
    params2.page = 1;
    refreshing2.value = false;
  }
  try {
    loading2.value = true
    await orderDB.initDB()
    const account = await eth.getAccount()
    let data = []
      data = await orderDB.getDataByIndex('recordList', 'TypeMyOwner', ['1', account ], params2.page, pageSize)
  
    orderList2.value = [...orderList2.value, ...data]
    loading2.value = false
    if (data.length == pageSize) {
      params2.page = params2.page + 1
    } else {
      finished2.value = true;
    }
  } catch (err) {
    loading2.value = false;
    finished2.value = true;
  }
};
const state = reactive({
  data: null,
});
const partnerList = ref([]);
const requireImg = (imgPath) => {
  return new URL(`../../assets/images/${imgPath}`, import.meta.url).href;
};
const getNewData = async (account) => {
  await orderDB.initDB()
  let data = null
  if(active.value==1){
      data = await orderDB.getDataByIndex('recordList', 'TypeMyOwner', ['2', account ], 1, pageSize)

  orderList.value = data
}else{
      data = await orderDB.getDataByIndex('recordList', 'TypeMyOwner', ['1', account ], 1, pageSize)
    orderList2.value = data
}
}
const initData = async (accounts) => {
  active.value = localStorage.getItem('myActive') || 1
  if(active.value==1){
    await onLoad1()
  }else{
    await onLoad2()
  }
  const account = await eth.getAccount()
  await c2cEth.getUserRecord(account)
  setTimeout(()=>{
   getNewData(account)
  },500)
};
initData();
onMounted(() => {
  ethereum.on("accountsChanged", async function (accounts) {
    initData(accounts[0]);
  });
});
</script>
<style>
:root:root {
  --van-button-primary-background: red;
  --van-pagination-item-default-color: #f39018;
}
</style>
<style lang="scss" scoped>
  .complete_box {
    display: flex;
    align-items: center;
    margin: 5px 0;
    justify-content: space-between;
    flex-wrap: wrap;

    
    .complete_item{
      display: flex;
      align-items: center;
      justify-content: center;
      &:first-child{
        padding-right: 30px;
      }
    } 

    .complete_sum {
      line-height: normal;
      display: flex;
      margin-left: 10px;
      align-items: center;
      gap: 6px;
      img {
        height: 16px;
      }
      .sum_value {
        color: #f39018;
        line-height: normal;
      }
    }
  }
  .color_light {
    color: #ddd;
    display: inline-block;
    border: 1px solid #414c60;
    position: relative;
    padding: 6px;
    margin-left: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    .icon_down {
      font-size: 10px;
      margin-left: 4px;
    }
    img {
      height: 16px;
      margin-right: 7px;
    }
  }
.language_box {
  padding: 5px 0px;
  background: #222143;
  position: relative;
}
.language_item {
  font-size: 12px;
  padding: 10px 15px;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;

  .van-image {
    height: 18px;
    width: 18px;
    margin-right: 8px;
  }
}
.language_item_active {
  color: rgb(246, 109, 26);
}
.title_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.index_box {
  padding: 14px;
}
.tab_box {
  position: relative;
  background: #131e3f;
  border-radius: 6px;
  display: inline-flex;
  .item {
    text-align: center;
    width: 70px;
    height: 30px;
    line-height: 30px;
    position: relative;
    z-index: 2;
    color: #c3c8d2;
  }
  .ac {
    color: #fff;
  }
  .bg {
    position: absolute;
    left: 6px;
    top: 2px;
    z-index: 1;
    width: 64px;
    height: 26px;
    background: #f39018;
    border-radius: 6px;
    transition: all 0.5s;
  }
  .left1 {
    left: 72px;
  }
}
</style>
